{extend name="foxcms_home" /}
{block name="css"}
<style>
	.column-5 {
		flex: 1 0 auto;
		width: 0;
		cursor: pointer;
	}

	.update-log .info a:link {
		color: #909399;
	}

	.update-log .info a:visited {
		color: #909399;
	}

	.update-log .info a:active {
		color: #909399;
	}

	.update-log .info a:hover {
		color: #2879fe;
	}
</style>
{/block}
{block name="body"}

<div class="foxcms-content-inner">
	<!-- page content -->
	<div class="index-content">
		<div class="section section-panel">
			<div class="foxui-row">
				<div class="foxui-col-xs-12 foxui-col-sm-12">
					<div class="serve-info">
						<div class="title">
							<h2>
								<span>{$basic.name}</span>
								<a href="{:url('Config/base')}?columnId=23">
									<i class="foxui-icon-bianji-o"></i>
								</a>
							</h2>
							<p>{$basic.url_prefix}{$basic.url}</p>
						</div>
						<ul class="content">
							<li class="item">
								<span>服务器系统：</span>
								<strong>{$serverInfo.os}</strong>
							</li>
							<li class="item">
								<span>文件上传限制：</span>
								<strong>{$serverInfo.fileUpload}</strong>
							</li>
							<li class="item">
								<span>服务器环境：</span>
								<strong>{$serverInfo.webServer}</strong>
							</li>
							<li class="item">
								<span>POST：</span>
								<strong>{$serverInfo.postSize|default='unknown'}</strong>
							</li>
							<li class="item">
								<span>服务器IP：</span>
								<strong>{$serverInfo.ip}</strong>
							</li>
							<li class="item">
								<span>最大执行时间：</span>
								<strong>{$serverInfo.maxExTime}</strong>
							</li>
				
							<li class="item">
								<span>PHP版本：</span>
								<strong>{$serverInfo.phpVersion}</strong>
							</li>
							<li class="item">
								<span>MYSQL版本：</span>
								<strong>{$serverInfo.mysqlVersion}</strong>
							</li>
						</ul>
					</div>
				</div>
				<div class="foxui-col-xs-12 foxui-col-sm-12">
					<div class="foxui-row action-list">
						<div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action" href="{$links.siteSet}">
								<div class="icon">
									<i class="foxui-icon-quanju-f"></i>
								</div>
								<span>网站设置</span>
							</a>
						</div>
						<div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action" href="{$links.column}">
								<div class="icon">
									<i class="foxui-icon-neirong-f"></i>
								</div>
								<span>栏目管理</span>
							</a>
						</div>
						<div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action" href="{$links.sitemapUrl}">
								<div class="icon">
									<i class="foxui-icon-ditu-f"></i>
								</div>
								<span>网站地图</span>
							</a>
						</div>
						<div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action" href="{$links.countPath}">
								<div class="icon">
									<i class="foxui-icon-diqiu-f"></i>
								</div>
								<span>访客统计</span>
							</a>
						</div>
						<div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action" href="{$links.baiduRecord}" target="_blank">
								<div class="icon">
									<i class="foxui-icon-baidu-f"></i>
								</div>
								<span>百度收录</span>
							</a>
						</div>
						<div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action" href="{$links.htmlStatic}">
								<div class="icon">
									<i class="foxui-icon-kanban-f"></i>
								</div>
								<span>SEO设置</span>
							</a>
						</div>
						<!-- <div class="foxui-col-xs-8 foxui-col-sm-8">
							<a class="foxui-link action form-manage" href="{$links.formList}">
								<div class="icon">
									<i class="foxui-icon-biaodan-f"></i>
								</div>
								<span>表单管理</span>
							</a>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="section section-panel content-total margin-top-24">
			<div class="panel-title">
				<h3>
					<i class="foxui-icon-tongji-o"></i>
					<span>内容统计</span>
				</h3>
			</div>
			<div class="content">
				<div class="display-flex">
					<div class="column-5" id="articleUrl">
						<div class="column-inner">
							<div>
								<i class="foxui-icon-xinwen-o"></i>
							</div>
							<div>
								<h1>{$helpCenters.articleCount}</h1>
								<p>文章内容</p>
							</div>
						</div>
					</div>
					<div class="column-5" id="imagesUrl">
						<div class="column-inner">
							<div>
								<i class="foxui-icon-tupian-o"></i>
							</div>
							<div>
								<h1>{$helpCenters.imagesCount}</h1>
								<p>图集内容</p>
							</div>
						</div>
					</div>
					<div class="column-5" id="productUrl">
						<div class="column-inner">
							<div>
								<i class="foxui-icon-tupian-o"></i>
							</div>
							<div>
								<h1>{$helpCenters.productCount}</h1>
								<p>产品内容</p>
							</div>
						</div>
					</div>
					<div class="column-5" id="videoUrl">
						<div class="column-inner">
							<div>
								<i class="foxui-icon-tupian-o"></i>
							</div>
							<div>
								<h1>{$helpCenters.videoCount}</h1>
								<p>视频内容</p>
							</div>
						</div>
					</div>
					<div class="column-5" id="linkUrl">
						<div class="column-inner">
							<div>
								<i class="foxui-icon-youlian-o"></i>
							</div>
							<div>
								<h1>{$helpCenters.linkCount}</h1>
								<p>友情链接</p>
							</div>
						</div>
					</div>
					<div class="column-5" id="adUrl">
						<div class="column-inner">
							<div>
								<i class="foxui-icon-guanggao-o"></i>
							</div>
							<div>
								<h1>{$helpCenters.adCount}</h1>
								<p>广告数量</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section section-panel visit-profile margin-top-24">
			<div class="panel-title">
				<h3>
					<i class="foxui-icon-fangke-o"></i>
					<span>访问概况</span>
				</h3>
			</div>
			<div class="content">
				<div class="foxui-tabs foxui-type-line foxui-position-right" id="viewTabs">
					<div class="foxui-tabs-header">
						<div class="foxui-tabs-item is-active">今日</div>
						<div class="foxui-tabs-item">昨日</div>
						<div class="foxui-tabs-item">近7日</div>
						<div class="foxui-tabs-item">近30日</div>
					</div>
					<div class="foxui-tabs-content">
						<div class="foxui-tabs-pane todayChart">
							<div class="foxui-row foxui-align-items-center">
								<div class="foxui-col-xs-6 foxui-col-sm-6">
									<div class="pv">
										<p>
											<span>总浏览量(PV)</span>
											<i class="foxui-icon-wenti-f pv-tip"></i>
										</p>
										<h1></h1>
									</div>
									<div class="uv">
										<p>
											<span>总访客量(UV)</span>
											<i class="foxui-icon-wenti-f uv-tip"></i>
										</p>
										<h1></h1>
									</div>
								</div>
								<div class="foxui-col-xs-18 foxui-col-sm-18">
									<div class="echart-box" id="todayChart"></div>
								</div>
							</div>
						</div>

						<div class="foxui-tabs-pane yesterdayChart">
							<div class="foxui-row foxui-align-items-center">
								<div class="foxui-col-xs-6 foxui-col-sm-6">
									<div class="pv">
										<p>
											<span>总浏览量(PV)</span>
											<i class="foxui-icon-wenti-f pv-tip"></i>
										</p>
										<h1></h1>
									</div>
									<div class="uv">
										<p>
											<span>总访客量(UV)</span>
											<i class="foxui-icon-wenti-f uv-tip"></i>
										</p>
										<h1></h1>
									</div>
								</div>
								<div class="foxui-col-xs-18 foxui-col-sm-18">
									<div class="echart-box" id="yesterdayChart"></div>
								</div>
							</div>
						</div>

						<div class="foxui-tabs-pane weekChart">
							<div class="foxui-row foxui-align-items-center">
								<div class="foxui-col-xs-6 foxui-col-sm-6">
									<div class="pv">
										<p>
											<span>总浏览量(PV)</span>
											<i class="foxui-icon-wenti-f pv-tip"></i>
										</p>
										<h1></h1>
									</div>
									<div class="uv">
										<p>
											<span>总访客量(UV)</span>
											<i class="foxui-icon-wenti-f uv-tip"></i>
										</p>
										<h1></h1>
									</div>
								</div>
								<div class="foxui-col-xs-18 foxui-col-sm-18">
									<div class="echart-box" id="weekChart"></div>
								</div>
							</div>
						</div>

						<div class="foxui-tabs-pane monthChart">
							<div class="foxui-row foxui-align-items-center">
								<div class="foxui-col-xs-6 foxui-col-sm-6">
									<div class="pv">
										<p>
											<span>总浏览量(PV)</span>
											<i class="foxui-icon-wenti-f pv-tip"></i>
										</p>
										<h1></h1>
									</div>
									<div class="uv">
										<p>
											<span>总访客量(UV)</span>
											<i class="foxui-icon-wenti-f uv-tip"></i>
										</p>
										<h1></h1>
									</div>
								</div>
								<div class="foxui-col-xs-18 foxui-col-sm-18">
									<div class="echart-box" id="monthChart"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{include file="footed-copy"/} {/block}
{block name="js"}
<script>
	$("#linkUrl").click(function() {
		window.location.href = "{$helpCenters.linkUrl}";
	})
	$("#adUrl").click(function() {
		window.location.href = "{$helpCenters.adUrl}";
	})
	$("#articleUrl").click(function() {
		window.location.href = "{$helpCenters.similarArticleUrl}?model=article&type=1";
	})
	$("#productUrl").click(function() {
		window.location.href = "{$helpCenters.similarArticleUrl}?model=product&type=1";
	})
	$("#imagesUrl").click(function() {
		window.location.href = "{$helpCenters.similarArticleUrl}?model=images&type=1";
	})
	$("#videoUrl").click(function() {
		window.location.href = "{$helpCenters.similarArticleUrl}?model=video&type=1";
	})
</script>
<script src="{$staticPath}js/index.js"></script>

<script>
	//访问概况
	function accessProfile(type) {
		let data;
		$.ajax({
			type: 'post',
			url: "{:url('accessProfile')}",
			dataType: 'json',
			async: false,
			data: {
				type: type
			},
			success: function(res) {
				if (res.code == 1) {
					data = res.data;
				}
			},
			error: function(res) {},
		});
		return data;
	}

	function todayChart() {
		let data = accessProfile(1);
		let pvList = data.pvList;
		let uvList = data.uvList;
		let labelList = data.labelList;
		let pvTotal = data.pvTotal;
		let uvTotal = data.uvTotal;
		$('.todayChart .pv h1').html(pvTotal);
		$('.todayChart .uv h1').html(uvTotal);
		// 今日
		let todayChart = echarts.init(document.getElementById('todayChart'));
		todayChart.setOption(chartOption({
			pvList,
			uvList,
			labelList
		}));
		window.onresize = () => {
			todayChart.resize();
		};
	}
</script>
<script>
	//初始化当日（默认）
	todayChart();
	foxui.tabs.$on(function({
		index,
		id
	}) {
		if (id === 'viewTabs') {
			if (index === 0) {
				//当日
				todayChart();
			} else if (index === 1) {
				let data = accessProfile(2);
				let pvList = data.pvList;
				let uvList = data.uvList;
				let labelList = data.labelList;
				let pvTotal = data.pvTotal;
				let uvTotal = data.uvTotal;
				$('.yesterdayChart .pv h1').html(pvTotal);
				$('.yesterdayChart .uv h1').html(uvTotal);
				// 昨日
				let yesterdayChart = echarts.init(document.getElementById('yesterdayChart'));
				yesterdayChart.setOption(chartOption({
					pvList,
					uvList,
					labelList
				}));
				window.onresize = () => {
					yesterdayChart.resize();
				};
			} else if (index === 2) {
				let data = accessProfile(3);
				let pvList = data.pvList;
				let uvList = data.uvList;
				let labelList = data.labelList;
				let pvTotal = data.pvTotal;
				let uvTotal = data.uvTotal;
				$('.weekChart .pv h1').html(pvTotal);
				$('.weekChart .uv h1').html(uvTotal);

				// 近7日
				let weekChart = echarts.init(document.getElementById('weekChart'));
				weekChart.setOption(chartOption({
					pvList,
					uvList,
					labelList
				}));
				window.onresize = () => {
					weekChart.resize();
				};
			} else if (index === 3) {
				let data = accessProfile(4);
				let pvList = data.pvList;
				let uvList = data.uvList;
				let labelList = data.labelList;
				let pvTotal = data.pvTotal;
				let uvTotal = data.uvTotal;
				$('.monthChart .pv h1').html(pvTotal);
				$('.monthChart .uv h1').html(uvTotal);

				// 近30日
				let monthChart = echarts.init(document.getElementById('monthChart'));
				monthChart.setOption(chartOption({
					pvList,
					uvList,
					labelList
				}));
				window.onresize = () => {
					monthChart.resize();
				};
			}
		}
	});
</script>

{/block}